import { useTableScroll } from '@/hooks/useTableScroll';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef, useState } from 'react';

const ACSDetail = () => {
  const [count] = useState(0);
  const tableScrollHeight = useTableScroll({}, count);
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<any>[] = [
    {
      title: '订单编号',
      dataIndex: 'importBizNo',
      width: 160,
    },
    {
      title: '外部批次号',
      dataIndex: 'importBatchNo',
      width: 160,
    },
    {
      title: '支付宝订单号',
      dataIndex: 'payFundOrderId',
      width: 160,
    },
    {
      title: '收款账号',
      dataIndex: 'identity',
      width: 160,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 160,
    },
    {
      title: '金额',
      dataIndex: 'transAmount',
      width: 160,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 160,
    },
    {
      title: '失败原因',
      dataIndex: 'errorMsg',
      width: 160,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 160,
    },
    {
      title: '电子回单',
      dataIndex: 'receiptStatus',
      width: 160,
    },
  ];

  return (
    <div>
      <ProTable
        scroll={{ y: tableScrollHeight, x: 200 }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        actionRef={actionRef}
        cardBordered
        columnsState={{
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
        }}
        toolBarRender={() => [
          <Button key="button" type="primary">
            导出
          </Button>,
        ]}
      />
    </div>
  );
};

export default ACSDetail;
